<template>
    <div>
        <v-toolbar app>
            <v-btn icon>
                <v-icon>arrow_back</v-icon>
            </v-btn>
            <v-toolbar-title>接口测试</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn @click="submitDate" icon>
                <v-icon>done</v-icon>
            </v-btn>
        </v-toolbar>
        <v-content>
            <v-form>
                <v-container fill-height>
                    <v-layout row>
                        <v-flex xs12>
                            <v-layout row wrap>
                                <v-flex xs5>
                                    <v-text-field value="method_code" label="参数名" readonly></v-text-field>
                                </v-flex>
                                <v-flex xs5 offset-xs1>
                                    <v-text-field v-model="method_code" label="参数值" placeholder="eg. c001.s001.m001"></v-text-field>
                                </v-flex>
                                <v-flex xs1></v-flex>
                                <v-flex v-if="withToken" xs12>uid：{{uid}}</v-flex>
                                <v-flex v-if="withToken" xs12>token：{{userToken}}</v-flex>
                            </v-layout>
                            <v-layout row v-for="(param,index) in customParams" :key="index">
                                <v-flex xs5>
                                    <v-text-field v-model="param.key" label="参数名"></v-text-field>
                                </v-flex>
                                <v-flex xs5 offset-xs1>
                                    <v-text-field v-model="param.value" label="参数值"></v-text-field>
                                </v-flex>
                                <v-flex xs1 align-self-center>
                                    <div class="btnDelete" @click="deleteParam(index)">X</div>
                                </v-flex>
                            </v-layout>
                            <v-layout row wrap>
                                <v-flex xs5>
                                    <v-btn @click="addParam" color="info">新增参数</v-btn>
                                </v-flex>
                                <v-flex xs5 offset-xs2>
                                    <v-btn @click="addUidAndToken" color="info">uid及token</v-btn>
                                </v-flex>
                                <v-flex xs12 v-if="showReturn">
                                    返回值：
                                    {{returnData}}
                                </v-flex>
                            </v-layout>
                        </v-flex>
                    </v-layout>
                </v-container>
            </v-form>
        </v-content>
    </div>
</template>
<script>
import httpUtils from '../utils/httpUtils'
import { userData } from '../utils/commonUtils';
export default {
    name: 'portTest',
    components:{
    },
    data: function () {
        return {
            method_code: '',
            customParams: [],
            returnData: '',
            showReturn: false,
            withToken: false,
            uid: '',
            userToken: ''
        };
    },
    beforeMount() {
        this.uid = userData.uid;
        this.userToken = userData.userToken;
    },
    methods: {
        addParam() {
            this.$set(this.customParams, this.customParams.length, {
                key: '',
                value: ''
            });
        },
        deleteParam(idx) {
            this.$delete(this.customParams, idx);
        },
        submitDate() {
            let submitData = {};
            for (let param of this.customParams) {
                if (param.key) {
                    submitData[param.key] = param.value;
                }
            }
            if (this.withToken) {
                httpUtils.getJSONWithUrl(this.method_code, submitData).then(data => {
                    this.returnData = JSON.stringify(data);
                    this.showReturn = true;
                }).catch((err) => {
                    this.$store.dispatch('valert/showAlert', { text: '错误：' + err });
                })
            } else {
                httpUtils.getJSONWithUrl(this.method_code, submitData).then(data => {
                    this.returnData = JSON.stringify(data);
                    this.showReturn = true;
                }).catch((err) => {
                    this.$store.dispatch('valert/showAlert', { text: '错误：' + err });
                })
            }
        },
        addUidAndToken() {
            if (this.withToken) {
                this.withToken = false;
                return;
            }
            if (this.uid && this.userToken) {
                this.withToken = true;
            } else {
                let submitData = {
                    uname: 'admin',
                    password: 'admin'
                }
                httpUtils.getJSONWithUrl("/f/postLogin", submitData).then(data => {
                    userData.uid = data.uid;
                    userData.userToken = data.userToken;
                    this.uid = data.uid;
                    this.userToken = data.userToken;
                    this.withToken = true;
                }).catch((err) => {
                    this.$store.dispatch('valert/showAlert', { text: '错误' + err });
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
.btnDelete {
    text-align: center;
    color: red;
}
</style>
